HC: touch text selection styling

- sync with Adwaita
- try to avoid using image assets

https://bugzilla.gnome.org/show_bug.cgi?id=750883

diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 5cd70bdf335458e29bfaf33b5fca5040ff69a220..a5e86d0a6f6346ba0b73242f4a269e63342bb82b 100644 (file)
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -1105,14 +1105,6 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells
   }
 }
 
-//touch selection handlebars for the Popover.osd above
-.cursor-handle {
-  background-color: transparent;
-  background-image: none;
-  &.top { -gtk-icon-source: -gtk-icontheme('selection-start-symbolic'); }
-  &.bottom { -gtk-icon-source: -gtk-icontheme('selection-end-symbolic'); }
-}
-
 /*****************
  * Notebooks and *
  * Tabs          *
@@ -2406,3 +2398,81 @@ GtkColorSwatch {
   }
 }
 
+/**********************
+ * Touch Copy & Paste *
+ *********************/
+
+//touch selection handlebars for the Popover.osd above
+.entry.cursor-handle,
+.cursor-handle {
+  background-color: $bg_color;
+  background-image: none;
+  -gtk-icon-source: none;
+  box-shadow: none;
+  outline-style: none;
+  outline-color: transparent;
+  border: 2px solid $fg_color;
+  @each $s,$as in ('',''),
+                  (':hover','-hover'),
+                  (':active','-active') { //no need for insensitive and backdrop
+                    &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
+                      border-radius: 10px 0 0 0;
+                      padding-left: 10px;
+                    }
+                    &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
+                      border-radius: 0 10px 0 0;
+                      padding-right: 10px;
+                    }
+                    &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
+                      border-radius: 10px 10px 0 0;
+                    }
+  }
+}
+
+/* Decouple the font of context menus from their entry/textview */
+.context-menu {
+  font: initial;
+}
+
+.touch-selection {
+  font: initial;
+  color: $osd_fg_color;
+  border: none;
+  background-color: opacify($osd_bg_color,0.2);
+  background-clip: padding-box;
+  outline-color: transparentize($osd_fg_color, 0.7);
+  box-shadow: none;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black;
+  &:backdrop { text-shadow: none; }
+  .button {
+    @include button(osd);
+    &:hover { @include button(osd-hover); }
+    &:active, &:checked { @include button(osd-active); }
+    &:insensitive, &:backdrop:insensitive { @include button(osd-insensitive); }
+    &:backdrop { @include button(osd-backdrop); }
+  }
+  // checkboxes and radios to use the -dark style for OSD style popovers
+  @each $w,$a in ('check', 'checkbox'),
+                 ('radio','radio') {
+    @each $s,$as in ('','-unchecked'),
+                  (':hover', '-unchecked-hover'),
+                  (':active', '-unchecked-active'),
+                  (':insensitive','-unchecked-insensitive'),
+                  (':inconsistent', '-mixed'),
+                  (':inconsistent:hover', '-mixed-hover'),
+                  (':inconsistent:selected', '-mixed-active'),
+                  (':inconsistent:insensitive', '-mixed-insensitive'),
+                  (':checked', '-checked'),
+                  (':checked:insensitive','-checked-insensitive'),
+                  (':checked:hover', '-checked-hover'),
+                  (':checked:active', '-checked-active'),
+                  (':backdrop:checked', '-checked-backdrop') {
+    .#{$w}#{$s} {
+      icon-shadow: none;
+      color: $osd_fg_color; 
+      }
+    }
+  }
+}
+

diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index b54a7113ea7be93cc46130329c6a1203dd8265cd..e5093fd15a583c8b55830a071e467d5dfeb7e506 100644 (file)
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -1324,14 +1324,6 @@ GtkTreeView.view.progressbar {
         border-color: rgba(255, 255, 255, 0.2);
         color: #7f7f7f; }
 
-.cursor-handle {
-  background-color: transparent;
-  background-image: none; }
-  .cursor-handle.top {
-    -gtk-icon-source: -gtk-icontheme("selection-start-symbolic"); }
-  .cursor-handle.bottom {
-    -gtk-icon-source: -gtk-icontheme("selection-end-symbolic"); }
-
 /*****************
  * Notebooks and *
  * Tabs          *
@@ -2695,3 +2687,183 @@ GtkColorSwatch {
     icon-shadow: none;
     border-color: transparent;
     transition-property: border, box-shadow, color; }
+
+/**********************
+ * Touch Copy & Paste *
+ *********************/
+.entry.cursor-handle,
+.cursor-handle {
+  background-color: #fff;
+  background-image: none;
+  -gtk-icon-source: none;
+  box-shadow: none;
+  outline-style: none;
+  outline-color: transparent;
+  border: 2px solid #000; }
+  .entry.cursor-handle.top:dir(ltr), .entry.cursor-handle.bottom:dir(rtl),
+  .cursor-handle.top:dir(ltr),
+  .cursor-handle.bottom:dir(rtl) {
+    border-radius: 10px 0 0 0;
+    padding-left: 10px; }
+  .entry.cursor-handle.bottom:dir(ltr), .entry.cursor-handle.top:dir(rtl),
+  .cursor-handle.bottom:dir(ltr),
+  .cursor-handle.top:dir(rtl) {
+    border-radius: 0 10px 0 0;
+    padding-right: 10px; }
+  .entry.cursor-handle.insertion-cursor:dir(ltr), .entry.cursor-handle.insertion-cursor:dir(rtl),
+  .cursor-handle.insertion-cursor:dir(ltr),
+  .cursor-handle.insertion-cursor:dir(rtl) {
+    border-radius: 10px 10px 0 0; }
+  .entry.cursor-handle.top:hover:dir(ltr), .entry.cursor-handle.bottom:hover:dir(rtl),
+  .cursor-handle.top:hover:dir(ltr),
+  .cursor-handle.bottom:hover:dir(rtl) {
+    border-radius: 10px 0 0 0;
+    padding-left: 10px; }
+  .entry.cursor-handle.bottom:hover:dir(ltr), .entry.cursor-handle.top:hover:dir(rtl),
+  .cursor-handle.bottom:hover:dir(ltr),
+  .cursor-handle.top:hover:dir(rtl) {
+    border-radius: 0 10px 0 0;
+    padding-right: 10px; }
+  .entry.cursor-handle.insertion-cursor:hover:dir(ltr), .entry.cursor-handle.insertion-cursor:hover:dir(rtl),
+  .cursor-handle.insertion-cursor:hover:dir(ltr),
+  .cursor-handle.insertion-cursor:hover:dir(rtl) {
+    border-radius: 10px 10px 0 0; }
+  .entry.cursor-handle.top:active:dir(ltr), .entry.cursor-handle.bottom:active:dir(rtl),
+  .cursor-handle.top:active:dir(ltr),
+  .cursor-handle.bottom:active:dir(rtl) {
+    border-radius: 10px 0 0 0;
+    padding-left: 10px; }
+  .entry.cursor-handle.bottom:active:dir(ltr), .entry.cursor-handle.top:active:dir(rtl),
+  .cursor-handle.bottom:active:dir(ltr),
+  .cursor-handle.top:active:dir(rtl) {
+    border-radius: 0 10px 0 0;
+    padding-right: 10px; }
+  .entry.cursor-handle.insertion-cursor:active:dir(ltr), .entry.cursor-handle.insertion-cursor:active:dir(rtl),
+  .cursor-handle.insertion-cursor:active:dir(ltr),
+  .cursor-handle.insertion-cursor:active:dir(rtl) {
+    border-radius: 10px 10px 0 0; }
+
+/* Decouple the font of context menus from their entry/textview */
+.context-menu {
+  font: initial; }
+
+.touch-selection {
+  font: initial;
+  color: #fff;
+  border: none;
+  background-color: black;
+  background-clip: padding-box;
+  outline-color: rgba(255, 255, 255, 0.3);
+  box-shadow: none;
+  text-shadow: 0 1px black;
+  icon-shadow: 0 1px black; }
+  .touch-selection:backdrop {
+    text-shadow: none; }
+  .touch-selection .button {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff;
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: none; }
+    .touch-selection .button:hover {
+      border-width: 2px;
+      border-style: solid;
+      color: #fff;
+      background-color: rgba(77, 77, 77, 0.8);
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .touch-selection .button:active, .touch-selection .button:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: rgba(0, 0, 0, 0.8);
+      background-color: #fff;
+      border-color: rgba(255, 255, 255, 0.2);
+      box-shadow: none; }
+    .touch-selection .button:insensitive, .touch-selection .button:backdrop:insensitive {
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.2);
+      color: #7f7f7f; }
+    .touch-selection .button:backdrop {
+      border-width: 2px;
+      border-style: solid; }
+  .touch-selection .check {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:hover {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:active {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:insensitive {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:inconsistent {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:inconsistent:hover {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:inconsistent:selected {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:inconsistent:insensitive {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:checked {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:checked:insensitive {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:checked:hover {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:checked:active {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .check:backdrop:checked {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:hover {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:active {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:insensitive {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:inconsistent {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:inconsistent:hover {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:inconsistent:selected {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:inconsistent:insensitive {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:checked {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:checked:insensitive {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:checked:hover {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:checked:active {
+    icon-shadow: none;
+    color: #fff; }
+  .touch-selection .radio:backdrop:checked {
+    icon-shadow: none;
+    color: #fff; }